/**
 * vue插件: 封装全局指令
 */

import { useIntersectionObserver } from '@vueuse/core'
// 默认图片
import Load from '@/assets/images/load.gif'

export default {
  install (app) {
    // 测试
    /**
     * 作用: 操作 DOM
     * 语法: app.directive('指令明', { mounted() { 在绑定元素的父组件挂载之后调用 } })
     */
    app.directive('border', {
      // 在绑定元素的父组件挂载之后调用
      /**
       * @param {*} el 绑定指令的元素的 dom 对象
       * @param {*} bind 获取指令绑定的变量值
       */
      mounted (el, bind) {
        // console.log('指令执行: ', el, bind)
        // 如果指令没有绑定变量: bind.value = undefined
        // el.style.border = `1px solid ${bind.value || 'red'}`
      }
    })

    /**
     * 图片懒加载
     */
    app.directive('imgLazy', {
      /**
       * @param {*} el img 的 dom 对象
       * @param {*} bind 获取图片地址
       */
      mounted (el, bind) {
        /**
         * 图片懒加载实现:
         * 1. 没有懒加载: <img :src="item.picture" alt="" />
         *    直接把后台的图片地址赋值给 src, 浏览器会立即下载并渲染
         * 2. 懒加载: <img v-imgLazy="item.picture" alt="" />
         *    核心: 判断 el 元素是否进入可视区
         *    进入了: el.src = bind.value -> 浏览器会立即下载并渲染
         */
        const { stop } = useIntersectionObserver(
          el, // 监控目标元素
          ([{ isIntersecting }]) => {
            if (isIntersecting) {
              // 图片进入可视区了
              // 默认先显示 loading 图片
              el.src = Load

              el.src = bind.value

              el.onerror = () => {
                // 图片加载失败
                el.src = Load
              }
              // 关闭监控
              stop()
            }
          }
        )
      }
    })
  }
}
